<!-- TourMdetails.vue 旅游商城详情页 -->
<template>
  <div class="tourMdetails">
    <!-- 头部图片 -->
    <header class="cover">
      <van-icon name="arrow-left" @click="$router.go(-1)"></van-icon>
      <van-image fit="contain" :src="goodDetail.main_img"></van-image>
    </header>
    <!-- 标题,价格等信息 -->
    <div class="detail-title">
      <div class="good-title">{{ goodDetail.title }}</div>
      <div class="good-price">
        <div class="num">
          <span>¥</span>
          <span>{{ goodDetail.price }}</span>
          /人起(参考价)
        </div>
        <div class="but-count">{{ goodDetail.buy_count }}已购买</div>
      </div>
    </div>
    <!-- 保障评价 -->
    <van-row class="promise">
      <!-- 分隔线(可重用) -->
      <van-col span="24" class="interval"> </van-col>
      <!-- 自由省心有保障图片 -->
      <van-col span="24">
        <van-image fit="contain" class="promise-img" src="https://www.uniqueway.com/mix/mip/images/cases/service-intro.png"></van-image>
      </van-col>
      <!-- 分隔线(可重用) -->
      <van-col span="24" class="interval"></van-col>
    </van-row>
    <!-- 行程评价 -->
    <van-row class="evaluate">
      <van-col span="24" class="evaluate-title">
        行程评价
      </van-col>
      <!-- 行程评价按钮 -->
      <van-col span="24" class="evaluate-tag">
        <span>行程设计合理</span>
        <span>温泉住宿代订赞</span>
        <span>性价比高</span>
      </van-col>
      <van-col span="24" class="evaluate-detail">
        <van-image round src="https://www.uniqueway.com/assets/img/icons/default_avatar.png" class="head-img"></van-image>
        <div class="evaluate-msg">
          <div class="msg-title">
            <div class="left-name">
              <div class="name">小X</div>
              <div class="time">2019/07/16</div>
            </div>
            <div class="right-star">
              <van-rate v-model="value" color="#5fc6c2" readonly />
            </div>
          </div>
          <div class="msg-content">推荐“游缘景行”，欢迎大家微信咨询，服务热心周到，无微不至。</div>
          <van-image class="msg-img" src="https://images.cdn.uniqueway.com/uploads/2019/07/V7FBiVmrNr9sWVbo7g5w3k6wi5C2ip2appssLtvE.jpeg"></van-image>
        </div>
        <div class="more">
          查看更多评价
        </div>
      </van-col>
    </van-row>
    <!-- 间隔 -->
    <van-col span="24" class="interval"></van-col>
    <!-- 图文详情 -->
    <van-tabs v-model="active" sticky scrollspy class="viscouslayout" color="#5fc6c2">
      <van-tab title="线路详情">
        <!-- <van-image fit="contain" :src="goodDetail.plan" v-show="goodDetail.plan"></van-image> -->
        <div v-show="goodDetail.plan" v-html="goodDetail.plan" class="detail-plan"></div>
      </van-tab>
      <van-tab title="图文详情">
        <van-image fit="contain" v-for="(t, i) of detail_imgs" :key="i" :src="t.details_img"></van-image>
        <!-- 分隔线(可重用) -->
        <van-col span="24" class="interval"> </van-col>
      </van-tab>
      <van-tab title="预定须知">
        <div class="needKnow">
          <span class="needKnow-title">预订须知</span>
          <div class="textdescription">
            <ul>
              <li>* 预定说明</li>
              <li>1. 您应当确保出行人身体条件适合旅游产品的行程安排，并如实填写确认《出境游客健康情况确认单》。</li>
              <li>
                2.请您在预订时务必提供准确、完整的信息（包括但不限于姓名、性别、护照信息、身份证信息、国籍、联系方式、是否成人或儿童等），以免产生预订错误，影响出行。如因您提供错误个人信息而造成的经济损失须您自行承担。
              </li>
              <li>
                3. 如需我社代为办理签证的，您需在确认预定订单后请立即准备签证所需材料，并务必在我社给出的最后截止时间前确保签证材料真实完整的交付 至我社。
              </li>
              <li>
                4.
                您在出行期间，应遵循我国和目的地国家及地区的有关规定以及当地公共场所的相关秩序规则，尊重当地的宗教信仰、民族习惯和风土人情，自觉保护当地自然环境。如您违反了中华人民共和国及目的地国家（地区）的有关规定，携带过量货币、物品或违禁品而产生的一切后果须由您自行承担。
              </li>
            </ul>
          </div>
        </div>
      </van-tab>
    </van-tabs>
    <van-button class="backButton" type="primary" icon="arrow-up" round plain @click="scrollTop" v-show="toUp">回到顶部</van-button>
    <div class="advisory">
      <div class="left">
        <div class="money">
          <span>¥</span>
          <span>{{ goodDetail.price }}</span>
          /人起(参考价)
        </div>
      </div>
      <span class="right">
        <div class="free">
          <van-icon name="records" />
          <span @click="handleClick">立即预定</span>
        </div>
      </span>
      <Reservation :gid="gid" :price="goodDetail.price" ref="reservation"></Reservation>
    </div>
  </div>
</template>
<script>
// 引入商品API
import { getGoodDetail, getDatileImg } from '../server/goods.js';
// 引入所需组件
import Reservation from '../components/Reservation.vue';

export default {
  components: {
    Reservation: Reservation,
  },
  props: ['gid'],
  data() {
    return {
      // 从浏览器缓存中获取用户信息
      token: localStorage.getItem('token'),
      value: 5, //五星
      active: '1', //tab选中项
      goodDetail: [], //保存商品详情
      detail_imgs: [], //保存商品详情
      toUp: false, //返回顶部
    };
  },

  async mounted() {
    // 加载中
    this.$toast.loading({
      message: '加载中...',
      duration: 0,
      forbidClick: true,
    });
    // 获取商品详情
    await getGoodDetail(this.gid)
      .then((result) => {
        this.goodDetail = result[0];
      })
      .catch(() => {});
    // 获取图片详情图
    await getDatileImg(this.gid)
      .then((result) => {
        this.detail_imgs = result;
      })
      .catch((err) => console.log(err));
    // //加载完成后关闭加载提示
    this.$toast.clear();
    // 判断滚动
    window.addEventListener('scroll', this.pageScroll);
  },
  methods: {
    // 弹出预定框
    handleClick() {
      if (this.token == null) {
        // 如果用户未登录
        this.$toast.fail('未登录,即将为您跳转登录页面');
        setTimeout(() => {
          this.$router.push('/login');
        }, 1000);
      } else {
        // 已登录
        this.$refs.reservation && this.$refs.reservation.showPopup();
      }
    },
    // 回到顶部
    scrollTop() {
      // 回到顶部
      document.documentElement.scrollTop = 0;
      window.pageYOffset = 0;
      document.body.scrollTop = 0;
      this.toUp = false;
    },
    // 判断滚动
    pageScroll() {
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      scrollTop > 1000 ? (this.toUp = true) : (this.toUp = false);
    },
  },
};
</script>

<style lang="scss">
@import './scss/tourMdetails.scss';
</style>
